<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生物树</title>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 100%;height: 1000px" id="biologyTree">
    <defs>
        <g id="nodeDef" style="cursor: pointer;">
            <rect width="150" height="100"  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
          stroke-opacity:0.9" rx="20" ry="20"/>
            <image x="10" y="10" xlink:href="svg/disabled.svg" width="15" height="15"/>
            <text  x="70" y="20" fill="red"  text-anchor="middle" dy=".3em" style="padding-left: 50px;">I love SVG</text>
        </g>
    </defs>
    <!--<use id="userId" xlink:href="#nodeDef" x="100" y="50"></use>-->
    <use x="200" y="100" xlink:href="svg/disabled.svg" width="50" height="50" style="cursor: crosshair;"/>
    <g id="rootNode" style="cursor: pointer;">
        <rect width="150" height="100"  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
          stroke-opacity:0.9" rx="20" ry="20"/>
        <image x="10" y="10" xlink:href="svg/disabled.svg" width="15" height="15"/>
        <text  x="70" y="20" fill="red"  text-anchor="middle" dy=".3em" style="padding-left: 50px;">生物</text>
    </g>
</svg>
<script type="text/javascript">
    var biologyTree=$("#biologyTree");
    //document.getElementById("biologyTree").appendChild(userNode);
    //var userNode2=document.createElement("use");
    //userNod2.xlink:href
    //document.querySelector("image")
    var userNode2=document.createElementNS('http://www.w3.org/2000/svg', "use");
    userNode2.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#nodeDef");
    userNode2.setAttribute("x",50);
    userNode2.setAttribute("y",50);

    biologyTree.append(userNode2);

    function Node() {
        
    }
</script>
</body>
</html>